<template>
	<view>
		<view class="kui-padding">
			<!-- 刘海屏占位 -->
			<view :style="{paddingTop:(sysInfo ? sysInfo.safeArea.top+10 : 60) + 'rpx'}"></view>
			<!-- 页面标题 -->
			<uni-title title="推荐" type="h1"></uni-title>
			<!-- 搜索框 -->
			<view class="search-bar kui-bg-white kui-border-radius kui-margin-top kui-padding kui-flex kui-flex-vcenter" @tap="toSearch">
				<uni-icons type="search" color="#999999"></uni-icons>
				<text class="kui-color-black9 kui-text kui-margin-l-small">搜索你想找的音乐</text>
			</view>
		</view>
		<!-- banner轮播图 -->
		<swiper class="swiper-box kui-flex kui-flex1 kui-margin-top kui-flex-center" ref="swiper"
			indicator-color="rgba(255, 255, 255, 0.3)" indicator-active-color="#FFFFFF" :current="currentIndex"
			:indicator-dots="true" :autoplay="true" :interval="5000" :duration="300" :circular="true">
			<swiper-item v-for="(item, index) in bannerList" :key="index">
				<view class="swiper-item">
					<image class="kui-border-radius-small2 image" :src="item.pic" @tap="bannerTaped(item)"></image>
					<view class="title-box kui-padding">
						<view class="title-box_card kui-flex kui-flex-center kui-flex-vcenter kui-opacity9"
							:style="{backgroundColor:item.titleColor}">
							<text class="kui-text-small kui-padding-small">{{ item.typeTitle }}</text>
						</view>
					</view>
				</view>
			</swiper-item>
		</swiper>
		<!-- 金刚区 -->
		<view class="kui-flex kui-margin-top kui-padding">
			<block v-for="(item, index) in optList" :key="index">
				<view class="row-col_view kui-border1 kui-flex1">
					<view class="row-col_view kui-flex-column kui-flex-vcenter kui-flex-space-between">
						<rich-text class="iconfont kui-color-green" :nodes="item.icon"></rich-text>
						<text class="kui-text-small">{{ item.desc }}</text>
					</view>
				</view>
			</block>
		</view>
		<!-- BLOCK_STYLE_RCMD【点歌机】 -->
		<view class="kui-margin-top" v-if="styleRCMD.uiElement">
			<view class="kui-padding kui-flex kui-flex-vcenter">
				<uni-title :title="styleRCMD.uiElement.subTitle.title"></uni-title>
				<view class="BLOCK_STYLE_RCMD-btn kui-bg-green-opacity1 kui-flex kui-flex-vcenter kui-flex-center">
					<text class="iconfont kui-text-small1 kui-color-white"
						style="position: relative;top: 2rpx;">&#xe87c;</text>
					<text style="padding: 0 3rpx;"></text>
					<text class="kui-text-small">{{ styleRCMD.uiElement.button.text }}</text>
				</view>
			</view>
			<swiper class="swiper-box_block-style-rcmd kui-border1" next-margin="30px" :indicator-dots="false"
				:autoplay="false" :interval="3000" :duration="300" v-if="styleRCMD.creatives">
				<swiper-item v-for="(item, index) in styleRCMD.creatives" :key="index">
					<view class="kui-margin-l">
						<view class="kui-flex kui-margin-b-small" style="height: 100rpx;"
							v-for="(item1, index1) in item.resources" :key="index1" v-if="item.resources" @tap="toSong(item1)">
							<view>
								<image class="BLOCK_STYLE_RCMD-list_card_img kui-border-radius-small-max"
									:src="item1.uiElement.image.imageUrl" mode=""></image>
							</view>
							<view class="kui-margin-l kui-flex kui-flex-column kui-flex-center"
								style="line-height: 1.1;">
								<view class="kui-flex kui-flex-vcenter">
									<view><text class="kui-text">{{ item1.uiElement.mainTitle.title }}</text></view>
									<view class="kui-margin-l-small">
										<text
											class="kui-text-small kui-color-black9">{{ handleSongArtlist(item1.resourceExtInfo.artists) }}</text>
									</view>
								</view>
								<view v-if="item1.uiElement.subTitle">
									<text class="kui-text-small kui-color-black9"
										:class="item1.uiElement.subTitle.titleType == 'songRcmdTag' ? 'kui-border kui-border-radius kui-padding-small kui-border-color-warning kui-color-warning kui-text-small-max1' : ''">{{ item1.uiElement.subTitle.title }}</text>
								</view>
							</view>
						</view>
					</view>
				</swiper-item>
			</swiper>
		</view>
		<!-- 雷达歌单 -->
		<view class="kui-margin-top" v-if="mgcPLAYLIST.length > 0">
			<view class="kui-padding kui-flex kui-flex-vcenter">
				<uni-title title="你的雷达歌单"></uni-title>
			</view>
			<view>
				<scroll-view class="kui-scroll_h" :scroll-x="true">
					<block v-for="(item, index) in mgcPLAYLIST" :key="index">
						<view class="kui-scroll-item_h kui-margin-l"
							:class="index == mgcPLAYLIST.length - 1 ? 'kui-margin-r' : ''">
							<canvas class="kui-scroll-item_h-image" :canvas-id="'myCanvas'+index">
								<view
									class="kui-flex kui-flex-end kui-margin-top-small kui-margin-r-small kui-opacity8">
									<view
										class="kui-view-autowidth kui-number-play-btn kui-flex kui-flex-vcenter kui-border-radius kui-relative"
										style="right: 10rpx;" :style="{backgroundColor:item.uiElement.imageColor}">
										<text class="iconfont kui-text-small kui-color-white">&#xe87c;</text>
										<text style="padding: 0 3rpx;"></text>
										<text
											class="kui-text-small-max kui-color-white-opacity8">{{ handlePlayCount(item.resources[0].resourceExtInfo.playCount) }}</text>
									</view>
								</view>
							</canvas>
							<!-- <image class="kui-scroll-item_h-image" :src="getImageMainColor(item.uiElement.image.imageUrl, index)" mode=""></image> -->
							<view class="kui-text-lh kui-relative" style="width: 180rpx;height: 60rpx;display: -webkit-box;-webkit-box-orient: vertical;-webkit-line-clamp: 3;overflow: hidden;">
								<text
									class="kui-text-small kui-text-wrap" style="width: 180rpx;height: 60rpx;display: -webkit-box;-webkit-box-orient: vertical;-webkit-line-clamp: 3;overflow: hidden;">{{ item.uiElement.mainTitle.title }}</text>
							</view>
						</view>
					</block>
				</scroll-view>
			</view>
		</view>
		<!-- 新歌新碟 -->
		<view class="kui-margin-top" v-if="newAlbumNewSongList.length">
			<view class="kui-padding kui-flex kui-flex-vcenter">
				<uni-title title="新歌新碟"></uni-title>
				<view class="BLOCK_STYLE_RCMD-btn kui-bg-green-opacity1 kui-flex kui-flex-vcenter kui-flex-center">
					<text class="iconfont kui-text-small1 kui-color-white"
						style="position: relative;top: 2rpx;">&#xe87c;</text>
					<text style="padding: 0 3rpx;"></text>
					<text class="kui-text-small">播放</text>
				</view>
			</view>
			<swiper class="swiper-box_block-style-rcmd kui-border1" next-margin="30px" :indicator-dots="false"
				:autoplay="false" :interval="3000" :duration="300">
				<swiper-item v-for="(item, index) in newAlbumNewSongList" :key="index">
					<view class="kui-margin-l">
						<view class="kui-flex kui-margin-b-small" style="height: 100rpx;"
							v-for="(item1, index1) in item.resources" :key="index1" v-if="item.resources">
							<view>
								<image class="BLOCK_STYLE_RCMD-list_card_img kui-border-radius-small-max"
									:src="item1.uiElement.image.imageUrl" mode=""></image>
							</view>
							<view class="kui-margin-l kui-flex kui-flex-column kui-flex-center"
								style="line-height: 1.1;">
								<view class="kui-flex kui-flex-vcenter">
									<view><text class="kui-text">{{ item1.uiElement.mainTitle.title }}</text></view>
									<view class="kui-margin-l-small">
										<text
											class="kui-text-small kui-color-black9">{{ handleSongArtlist(item1.resourceExtInfo.artists) }}</text>
									</view>
								</view>
								<view v-if="item1.uiElement.subTitle">
									<text class="kui-text-small kui-color-black9"
										:class="item1.uiElement.subTitle.titleType == 'songRcmdTag' ? 'kui-border kui-border-radius kui-padding-small kui-border-color-warning kui-color-warning kui-text-small-max1' : ''">{{ item1.uiElement.subTitle.title }}</text>
								</view>
							</view>
						</view>
					</view>
				</swiper-item>
			</swiper>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				bannerList: [],
				currentIndex: 0,
				optList: [{
					icon: '&#xe601;',
					desc: '个性电台'
				}, {
					icon: '&#xe730;',
					desc: '每日推荐'
				}, {
					icon: '&#xe600;',
					desc: '排行'
				}, {
					icon: '&#xe60d;',
					desc: '分类歌单'
				}, {
					icon: '&#xe90b;',
					desc: '新歌新碟'
				}],
				styleRCMD: [], // 点歌机
				mgcPLAYLIST: [], // 雷达歌单
				newAlbumNewSongList: [] ,// 新歌新碟
				sysInfo: null
			}
		},
		onLoad() {
			// this.getBannerList();
			this.getHomePageData();
			// uni.kHttp.get('/homepage/dragon/ball').then(res => {
			// 	console.log(res.data);
			// })
		},
		onReady() {
			const sys = uni.getSystemInfoSync();
			// console.log(sys);
			this.sysInfo = sys;
		},
		methods: {
			// 直接获取banner
			getBannerList() {
				uni.kHttp.get('/banner', {
					params: {
						type: 2
					}
				}).then(res => {
					this.bannerList = res.data.banners;
					console.log(this.bannerList);
				}).catch(err => {
					uni.showToast({
						title: err.errMsg
					});
				})
			},
			// 获取首页数据
			getHomePageData() {
				uni.kHttp.get('/homepage/block/page', {
					params: {
						refresh: true
					}
				}).then(res => {
					if (res.data.code == 200) {
						let data = res.data.data.blocks;
						console.log(data);
						// 获取Banner
						this.bannerList = data[0].extInfo.banners;
						if (!this.bannerList) {
							this.getBannerList();
						}
						// 获取点歌机内容
						this.styleRCMD = data[2];
						// console.log(this.styleRCMD);
						// 获取雷达歌单内容
						this.mgcPLAYLIST = data[6].creatives;
						for (let i in this.mgcPLAYLIST) {
							// this.mgcPLAYLIST[i].uiElement.imageColor = uni.kGetImgPrimaryColor(this.mgcPLAYLIST[i].uiElement.image.imageUrl, i, false);
							uni.kGetImgPrimaryColor(this.mgcPLAYLIST[i].uiElement.image.imageUrl, i, false).then(
								res => {
									this.$forceUpdate();
									// this.mgcPLAYLIST[i].uiElement.imageColor = res;
									this.mgcPLAYLIST[i].uiElement.imageColor = `rgba(${res.r}, ${res.g}, ${res.b}, 1)`;
								});
						}
						// 获取新歌
						this.newAlbumNewSongList = data[3].creatives.slice(0, 2);
						console.log(this.newAlbumNewSongList);
					} else {
						uni.showToast({
							title: res.data.message
						});
					}
				})
			},
			// 处理歌曲作者字符拼接
			handleSongArtlist(artLists) {
				let name = '';
				let nameList = [];
				if (!artLists.length) {
					return name;
				}

				artLists.map(item => {
					nameList.push(item.name);
				})

				name = nameList.join('/');

				return name;
			},
			// 处理播放量
			handlePlayCount(count) {
				return uni.kHandlePlayCount(count);
			},
			// 处理歌单标题
			handleMgcTitle(title) {
				// let limit = 0;
				// let bytesLengthRes = this.bytesLength(title, limit);
				// return bytesLengthRes.byteLength > limit ? (title.substr(0, bytesLengthRes.limitByteLengthIndex) +
				// 	' ...') : title;
				return title;
			},
			// 计算字符串字节长度
			bytesLength(str, limitByteLength = 34) {
				var count = str.length;
				var byteLength = str.length;
				var index = 0;
				for (var i = 0; i < str.length; i++) {
					if (str.charCodeAt(i) > 255) {
						byteLength++;
					}
					if (byteLength > limitByteLength) {
						index = i;
					}
				}
				return {
					count: count,
					byteLength: byteLength,
					limitByteLengthIndex: index
				}
			},
			// 获取图片主色
			getImageMainColor(src, index) {
				uni.kGetImgPrimaryColor(src, index, false).then(res => {
					console.log(res, '图片主色');
					this.$nextTick(function() {
						this.mgcPLAYLIST[index].imageColor = res;
						// this.mgcPLAYLIST[index].imageColor = `rgba(${res.r}, ${res.b}, ${res.a}, 1)`;
						console.log(this.mgcPLAYLIST);
					})
					// this.mgcPLAYLIST = [...this.mgcPLAYLIST];
				}).catch(err => {
					console.log(err);
				})
				// console.log(color, 222);
				return src;
			},
			confirm(e) {
				console.log(e);
			},
			inputing(e) {
				console.log(e);
			},
			bannerTaped(e) {
				console.log(e);
				if (e.url) {
					let url = e.url
					console.log(e.url);
					window.location.href = decodeURIComponent(url);
					return false;
					uni.kRouter.push({
						path: '/pages/browser/browser',
						query: {
							src: url
						}
					})
				}
			},
			// 打开搜索页
			toSearch() {
				uni.navigateTo({
					url: '/pages/search/search',
					animationType: 'slide-in-bottom'
				})
			},
			toSong(e) {
				console.log(e);
				let id = e.resourceId;
				uni.kRouter.push({
					path: '/pages/song/song',
					query: {
						id: id
					}
				})
			}
		}
	}
</script>

<style lang="scss">
	$swiper-height:260rpx;
	$swiper-block-style-rcmd-height:330rpx;
	$swiper-width:690rpx;

	.swiper-box {
		height: $swiper-height;
		width: 100%;
	}

	.swiper-box_block-style-rcmd {
		min-height: $swiper-block-style-rcmd-height;
		width: 100%;
	}

	.swiper-item {
		/* #ifndef APP-NVUE */
		display: flex;
		/* #endif */
		flex-direction: column;
		justify-content: center;
		align-items: center;
		/* background-color: #999; */
		color: #fff;
	}

	.image {
		height: $swiper-height;
		width: $swiper-width;
	}

	.title-box {
		position: absolute;
		right: 0;
		top: 0;
		// background-color: #4335D6;
		// margin-bottom: 220rpx;
	}

	.title-box_card {
		width: 100%;
		height: 40rpx;
		// line-height: 40rpx;
		// border-top-left-radius: 40rpx;
		border-bottom-left-radius: 20rpx;
		border-top-right-radius: 20rpx;
		// background-color: #007AFF;
	}

	.row-col_view {
		height: 100rpx;
		// background-color: #007AFF;
		// margin: 10;
	}

	.BLOCK_STYLE_RCMD-btn {
		min-width: 110rpx;
		height: 46rpx;
		border-radius: 46rpx;
	}

	.BLOCK_STYLE_RCMD-list_card_img {
		width: 100rpx;
		height: 100rpx;
		background-color: #00BC79;
	}
</style>
<style>
	page {
		background-color: #F8F8F8;
	}
</style>
